<template>
  <div class="page-container-padding">
    <div style="width:900px;">
      <el-card>
        <el-row :gutter="4">
          <el-col :span="2">源平台_ID</el-col>
          <el-col :span="5">{{ indexInfo.source_plat }}_{{ indexInfo.source_id }}</el-col>
          <el-col :span="2">指标名称</el-col>
          <el-col :span="15">{{ indexInfo.name_zh }}</el-col>
        </el-row>
        <el-row :gutter="4">
          <el-col :span="2">开始日期</el-col>
          <el-col :span="5">{{ indexInfo.startdate }}</el-col>
          <el-col :span="2">结束日期</el-col>
          <el-col :span="15">{{ indexInfo.enddate }}</el-col>
        </el-row>
        <el-row :gutter="4">
          <el-col :span="2">数据频率</el-col>
          <el-col :span="5">{{ indexInfo.frequency }}</el-col>
          <el-col :span="2">更新日期</el-col>
          <el-col :span="15">{{ indexInfo.refresh }}{{ indexInfo.state===1?'':'(停止)'}}</el-col>
        </el-row>
        <el-row :gutter="4">
          <el-col :span="2">数据单位</el-col>
          <el-col :span="5">{{ indexInfo.unit }}</el-col>
          <el-col :span="2">数据来源</el-col>
          <el-col :span="15">{{ indexInfo.raw_source }}</el-col>
        </el-row>
        <el-row :gutter="4">
          <el-col :span="2">状态</el-col>
          <el-col :span="5">{{ indexInfo.is_open===1?'开放':'隐藏' }}</el-col>
          <el-col :span="2">备注</el-col>
          <el-col :span="15">{{ indexInfo.note }}</el-col>
        </el-row>
      </el-card>
    </div>
    <div style="margin:5px 10px;">
      <div style="margin:8px 0;">
        <span style="font-size:17px;font-weight:700;color:#1296db;">{{ indexInfo.name_zh }}</span>
        <span style="margin-left:10px;">单位: {{ indexInfo.unit }}</span>
      </div>
      <div style="width:600px;">
        <el-table border stripe :data="indexData">
          <el-table-column prop="id" label="ID" width="90px"></el-table-column>
          <el-table-column prop="datadate" label="日期" width="120px"></el-table-column>
          <el-table-column label="数值">
            <template slot-scope="scope">
              <div class="tablerow">
                <span v-show="scope.row.iseditor">
                   <el-input size="mini" type="text" v-model="scope.row.datavalue" style="width:90px;margin-right:5px;"></el-input>
                   <el-button size="mini" type="text" @click="toUpdateValue(scope.row)">保存</el-button>
                </span>
                <span v-show="!scope.row.iseditor">
                  {{scope.row.datavalue}}
                  <span class="rowactions">
                    <i class="el-icon-edit-outline" @click="toShowRowEditor(scope.row)"></i>
                    <i class="el-icon-delete-solid" @click="toDeleteRowValue(scope.row, scope.$index)"></i>
                  </span>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top:5px;"
          background
          :current-page="page"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalCount"
          @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getEDBTableDetail, updateIndexValue, deleteIndexValue } from '@/api/edbdata/datalib'
export default{
  data(){
    return {
      indexId: -1,
      page: 1,
      pageSize: 100,
      totalCount: 0,
      indexInfo: {},
      indexData: []
    }
  },
  mounted() {
    this.indexId = this.$route.query.iid
    if (this.indexId>0){
      this.getIndexDetail()
    }
  },
  methods:{
    getIndexDetail(){
      const params = {
        iid: this.indexId,
        page: this.page,
        page_size: this.pageSize
      }
      getEDBTableDetail(params).then(res => {
        const data = res.data
        this.indexInfo = data.index_info
        this.indexData = data.data.map(item => {item.iseditor=false; return item})
        this.page = data.page
        this.totalCount = data.total_count
      })
    },

    toUpdateValue(row){
      const valueData = {
        dataid: this.indexInfo.id,
        value_id: row.id,
        datadate: row.datadate,
        datavalue: row.datavalue
      }
      updateIndexValue(valueData).then(res => {
        if (res.code === 200){
          this.$baseMessage(res.msg, 'success')
        }else{
          this.$baseMessage(res.msg, 'error')
        }
        row.iseditor = false
      })
    },

    // 删除数据
    toDeleteRowValue(row, index){
      console.log(row, index);
      const valueData = {
        dataid: this.indexInfo.id,
        value_id: row.id,
        datadate: row.datadate,
        datavalue: row.datavalue
      }
      this.$baseConfirm('确定要删除该数据吗?', null,async()=>{
        deleteIndexValue(valueData).then(res => {
          if (res.code === 200){
            this.$baseMessage(res.msg, 'success')
            // 刷新当前数据
            this.getIndexDetail()
          }else{
            this.$baseMessage(res.msg, 'error')
          }
        })
      })

    },

    handlePageChange(page){
      this.page = page
      this.getIndexDetail()
    },

    toShowRowEditor(row){
      row.iseditor = true
    }
  }
}
</script>

<style scoped lang="scss">
.showactions{opacity: 1;}
.tablerow{
  display:block;
  width: 100%;
  .rowactions{
    float:right;
    opacity: 0;
    .el-icon-edit-outline,.el-icon-delete-solid{
      cursor: pointer;
      margin-left: 6px;
    }
    .el-icon-edit-outline{
      color: #0073FC;
    }
    .el-icon-delete-solid{
      color: #F34D37;
    }
  }
  &:hover{
    .rowactions{
      @extend .showactions;
    }
  }
}
</style>
